<!DOCTYPE html>
<html lang="zh-CN en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DJI 大疆商城</title>
    <link rel="stylesheet" href="../static/libs/css/bootstrap.css" crossorigin="anonymous">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>


    <header>
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Carousel</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
                <div class="collapse navbar-collapse" id="navbarCollapse">
                    <ul class="navbar-nav me-auto mb-2 mb-md-0">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                        </li>
                    </ul>
                    <form class="d-flex">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>
    </header>
    <nav class="container d-flex flex-column flex-md-row justify-content-between">
        <a class="py-2 d-none d-md-inline-block" href="#">Tour</a>
        <a class="py-2 d-none d-md-inline-block" href="#">Product</a>
        <a class="py-2 d-none d-md-inline-block" href="#">Features</a>
        <a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a>
        <a class="py-2 d-none d-md-inline-block" href="#">Support</a>
        <a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
        <a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
    </nav>
    <!-- 产品列表 -->
    <nav class="productList">
        <ul class="productList_ul">
            <li class="productList_li">
                <a data-test-locator="linkMenuItemMavicSeries" href="#">
                    <div class="tuotemalli">
                        <img src="//stormsend1.djicdn.com/stormsend/uploads/48c26180-9980-0136-3e40-12528100fbe3/mavic2.svg" alt="">
                    </div>
                    <div class="productName">御 Mavic</div>
                </a>
            </li>
            <li class="productList_li">
                <a data-test-locator="linkMenuItemOsmoSeries" href="#">
                    <div class="tuotemalli">
                        <img src="//stormsend1.djicdn.com/stormsend/uploads/c55279e0-d39c-0136-af8a-1237445f15bc/ic-Tiny-70x56.svg" alt="">
                    </div>
                    <div class="productName">灵眸 Osmo</div>
                </a>
            </li>
            <li class="productList_li">
                <a data-test-locator="linkMenuItemDjiFpvSeries" href="#">
                    <div class="tuotemalli">
                        <img src="//stormsend1.djicdn.com/stormsend/uploads/aefb3853a22bc89a0726cdc0b83b8ba2.svg" alt="">
                    </div>
                    <div class="productName">DJI FPV</div>
                </a>
            </li>
            <li class="productList_li">
                <a data-test-locator="linkMenuItemPhantomSeries" href="#">
                    <div class="tuotemalli">
                        <img src="//stormsend1.djicdn.com/stormsend/uploads/769872f0-9980-0136-ac89-1237445f15bc/phantom.svg" alt="">
                    </div>
                    <div class="productName">精灵 Phantom</div>
                </a>
            </li>
            <li class="productList_li">
                <a data-test-locator="linkMenuItemHandheldGimbals" href="#">
                    <div class="tuotemalli">
                        <img src="//stormsend1.djicdn.com/stormsend/uploads/de75be6aa8725b0d70b9f367a36381e6.svg" alt="">
                    </div>
                    <div class="productName">如影 Ronin</div>
                </a>
            </li>
            <li class="productList_li">
                <a data-test-locator="linkMenuItemRobomasters" href="#">
                    <div class="tuotemalli">
                        <img src="//stormsend1.djicdn.com/stormsend/uploads/53e4f4dd7d74f6ee7bff1ccd8b54cc86.svg" alt="">
                    </div>
                    <div class="productName">机甲大师</div>
                </a>
            </li>
            <li class="productList_li">
                <a data-test-locator="linkMenuItemInspireSeries" href="#">
                    <div class="tuotemalli">
                        <img src="//stormsend1.djicdn.com/stormsend/uploads/829c31f0-9980-0136-3e42-12528100fbe3/inspire.svg" alt="">
                    </div>
                    <div class="productName">悟 Inspire</div>
                </a>
            </li>
            <li class="productList_li">
                <a data-test-locator="linkMenuItemIndustrial" href="#">
                    <div class="tuotemalli">
                        <img src="//stormsend1.djicdn.com/stormsend/uploads/c856e5d1f16c645fd71841008f1c2504.svg" alt="">
                    </div>
                    <div class="productName">行业应用</div>
                </a>
            </li>
            <li class="productList_li">
                <a data-test-locator="linkMenuItemTelloSeries" href="#">
                    <div class="tuotemalli">
                        <img src="//stormsend1.djicdn.com/stormsend/uploads/b22b91d0-997e-0136-ac83-1237445f15bc/tello.svg" alt="">
                    </div>
                    <div class="productName">睿炽科技丨特洛</div>
                </a>
            </li>
            <li class="productList_li">
                <a data-test-locator="linkMenuItemService" href="#">
                    <div class="tuotemalli">
                        <img src="//stormsend1.djicdn.com/stormsend/uploads/b928d350-997e-0136-ac84-1237445f15bc/service.svg" alt="">
                    </div>
                    <div class="productName">增值服务</div>
                </a>
            </li>
            <li class="productList_li">
                <a data-test-locator="linkMenuItemSouvenir" href="#">
                    <div class="tuotemalli">
                        <img src="//stormsend1.djicdn.com/stormsend/uploads/6bf1b630-9980-0136-ac88-1237445f15bc/others.svg" alt="">
                    </div>
                    <div class="productName">创意周边</div>
                </a>
            </li>
        </ul>
    </nav>

    <main>
        <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
                    <img src="https://stormsend1.djicdn.com/stormsend/uploads/c507d800c34bb74e9dd27ee7ac8ed9d7.jpg" alt="">
                    <div class="container">
                        <div class="carousel-caption text-start">
                            <h1>11111111111.</h1>
                            <p>11111111111.</p>
                            <p><a class="btn btn-lg btn-primary" href="#">11111111111.</a></p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
                    <img src="https://stormsend1.djicdn.com/stormsend/uploads/d2db9d39d867c555e1b425ebd170021d.jpg" alt="">
                    <div class="container">
                        <div class="carousel-caption">
                            <h1>222222222222222.</h1>
                            <p>222222222222222.</p>
                            <p><a class="btn btn-lg btn-primary" href="#">222222222222222.</a></p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
                    <img src="https://stormsend1.djicdn.com/stormsend/uploads/6a214600150575fa57d9a05c77f30e7a.jpg" alt="">
                    <div class="container">
                        <div class="carousel-caption text-end">
                            <h1>333333333333333.</h1>
                            <p>333333333333333.</p>
                            <p><a class="btn btn-lg btn-primary" href="#">333333333333333.</a></p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
                    <img src="https://stormsend1.djicdn.com/stormsend/uploads/eea443b8730a1a4eeb6a2dbd943e7555.jpg" alt="">
                    <div class="container">
                        <div class="carousel-caption text-end">
                            <h1>44444444444.</h1>
                            <p>44444444444.</p>
                            <p><a class="btn btn-lg btn-primary" href="#">44444444444.</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
            <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>

        <div class="container marketing">
            <div class="row">
                <div class="col-lg-4">


                    <h2>Heading</h2>
                    <p>Some representative placeholder content for the three columns of text below the carousel. This is the first column.</p>
                    <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
                </div>
                <!-- /.col-lg-4 -->
                <div class="col-lg-4">


                    <h2>Heading</h2>
                    <p>Another exciting bit of representative placeholder content. This time, we've moved on to the second column.</p>
                    <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
                </div>

                <div class="col-lg-4">


                    <h2>Heading</h2>
                    <p>And lastly this, the third column of representative placeholder content.</p>
                    <p><a class="btn btn-secondary" href="#">View details &raquo;</a></p>
                </div>

            </div>

            <hr class="featurette-divider">

            <div class="row featurette">
                <div class="col-md-7">
                    <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2>
                    <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
                </div>
                <div class="col-md-5">
                    <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>

                </div>
            </div>

            <hr class="featurette-divider">

            <div class="row featurette">
                <div class="col-md-7 order-md-2">
                    <h2 class="featurette-heading">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2>
                    <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
                </div>
                <div class="col-md-5 order-md-1">
                    <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>

                </div>
            </div>

            <hr class="featurette-divider">

            <div class="row featurette">
                <div class="col-md-7">
                    <h2 class="featurette-heading"><span class="text-muted"></span></h2>
                    <p class="lead"></p>
                </div>
                <div class="col-md-5">
                    <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"/><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>

                </div>
            </div>

            <hr class="featurette-divider">


        </div>
        <footer class="container">
            <p class="float-end"><a href="#">Back to top</a></p>

        </footer>
    </main>



</body>
<script src="../static/libs/javascripts/bootstrap.bundle.min.js"></script>

</html>